<!DOCTYPE html>
<html style="font-size: 100px;">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.12.4.js"></script>
		<link rel="stylesheet" href="css/swiper.min.css">
		<link rel="stylesheet" href="css/public.css">
		<script>
	        var dpr = window.devicePixelRatio;
	        document.write("<meta name=\"viewport\" content=\"width=device-width,initial-scale="+(1/dpr)+",minimum="+(1/dpr)+",maximum="+(1/dpr)+",user-scalable=no\">")
	        </script>
			<script type="text/javascript">
				  var html = document.querySelector("html");
	        html.style.fontSize = html.offsetWidth / 640 * 100 + "px";
	        addEventListener("resize", function () {
	            html.style.fontSize = html.offsetWidth / 640 * 100 + "px";
	        }, false);
		</script>
	</head>
	<body>
	<div id="main">
		<div id="loading">
			
		 	<div class="swiper-container">
        		<div class="swiper-wrapper">
		            <div class="swiper-slide"><div class="s1">
		            	<ul class="li1Child">
            	<li>
                	<p>曾经做为前端开发的你</p>
                    <p>解决PC兼容性而焦头烂额</p>
                </li>
                <li>
                	<p>而今</p>
                    <p>移动端H5应用疯狂来袭</p>
                </li>
                <li>
                	<p>你是否已准备充分</p>
                    <p>学习新技能</p>
                </li>
                <li>
                	<p>曾破茧成蝶、重获新生？</p>
                </li>
            </ul>
		            </div></div>
		            <div class="swiper-slide">
		            	<div class="s2">
		            		<ul class="li2Child">
				            	<li></li>
				                <li></li>
				                <li></li>
				                <li></li>
				                <li></li>
				                <li></li>
            				</ul>
		            	</div>
		            </div>
		            <div class="swiper-slide">
		            	<div class="s3">
		            		<div class="li3Child"></div>
		            	</div>
		            </div>
		            <div class="swiper-slide">
		            	<div class="s4">
		            		<ul class="li4Child">
				            	<li>transform  transition  rotate  scale  translate  keyframes animation  webkitTransitionEnd webkitAnimationIteration elapsedTime perspective…</li>
				                <li>drawImage lineWidth  strokeStyle  lineCap  globalCompositeOperation  moveTo   lineTo  stroke  arc  getImageData…</li>
				                <li>audio autoplay loop  paused  play  pause…</li>
            				</ul>
		            	</div>
		            </div>
		            <div class="swiper-slide"><div class="s5"></div></div>
		            <div class="swiper-slide"><div class="s6"></div></div>
		            <div class="swiper-slide"><div class="s7"></div></div>
		            <div class="swiper-slide"><div class="s8"></div></div>
        		</div>
        <!-- Add Pagination -->
        	<!--<div class="swiper-pagination"></div>-->
    		</div>
		</div>
		<div id="l_d">
			<ul class="u_l">
	        	<li></li>
	            <li></li>
	            <li></li>
	            <li></li>
	            <li></li>
	            <li></li>
        	</ul>
        	<div class="ld_v">你的技能是否已经载满....</div>
		</div>
		<canvas id="c1"></canvas>
    <div id="arrow"></div>
    <div id="music">
    	<audio id="audio1" src="img/music.mp3" preload="auto" loop></audio>
    </div>
	</div>
	</body>
	<script src="js/swiper.min.js"></script>
	<script src="js/public.js"></script>
   
</html>
